@designWidth: 750;
@left: left;
@right: right;
@top: top;
@center: center;
@bottom: bottom;
@default: default;
@solid: solid;
@dashed: dashed;
@dotted: dotted;
@absolute: absolute;
@relative: relative;
@fixed: fixed;
@percent100: 100%;
@percent50: 50%;
@percent25: 25%;
@percent33: 33.33%;
@px1: 1px; //一像素

/*margin*/
.margin(@px:10,@pos:@default) when ( @pos = @default ) {
  // margin: round((@px/@designWidth)*100vw, 2);
  margin: @px;
}

.margin(@px:10,@pos:@default) when not ( @pos = @default ) {
  //margin: round((@px/@designWidth)*100vw, 2);
  margin-@{pos}: @px;

}

/*padding*/
.padding(@px:10,@pos:@default) when ( @pos = @default ) {
  // padding: round((@px/@designWidth)*100vw, 2);
  padding: @px;
}

.padding(@px:10,@pos:@default) when not ( @pos = @default ) {
  // padding-@{pos}: round((@px/@designWidth)*100vw, 2);\
  padding-@{pos}: @px;
}

/*border*/
.border(@px:@px1,@pos:@default) when ( @pos = @default ) {
  border: solid @px;
}

.border(@px:@px1,@pos:@default) when not ( @pos = @default ) {
  border-@{pos}: solid @px;
}

.borderColor(@color) {
  border-color: @color;
}

.borderStyle(@type:@solid) {
  border-style: @type;
}

.borderWidth(@px) {
  //  border-width: round((@px/@designWidth)*100vw, 2);
  border-width: @px;
}

/*背景颜色*/
.bg(@color) {
  background: @color;
}

/*字体颜色*/
.color(@color) {
  color: @color;
}

/*位置*/
.align(@pos:@center) {
  text-align: @pos;
}


/*定位*/
.posTL(@pos,@top:0,@left:0) {
  position: @pos;
  //top: round((@top/@designWidth)*100vw, 2);
  //left: round((@left/@designWidth)*100vw, 2);
  top: @top;
  left: @left;
}

.posTr(@pos,@top:0,@right:0) {
  position: @pos;
  //top: round((@top/@designWidth)*100vw, 2);
  //right: round((@right/@designWidth)*100vw, 2);
  top: @top;
  right: @right;
}

.posBl(@pos,@bottom:0,@left:0) {
  position: @pos;
  //bottom: round((@bottom/@designWidth)*100vw, 2);
  //left: round((@left/@designWidth)*100vw, 2);
  bottom: @bottom;
  left: @left;
}

.posBr(@pos,@bottom:0,@right:0) {
  position: @pos;
  //bottom: round((@bottom/@designWidth)*100vw, 2);
  //right: round((@right/@designWidth)*100vw, 2);

  bottom: @bottom;
  right: @right;
}

.transition {
  transition: ease 1s;
}

/*宽高*/
.width(@width) {
  width: unit((100*@width/750), vw);
}

.height(@height) {
  height: unit((100*@height/750), vw);
}

.top(@top) {
  top: unit((100*@top/750), vw);
}

.left(@left) {
  left: unit((100*@left/750), vw);
}

.bottom(@bottom) {
  bottom: unit((100*@bottom/750), vw);
}

.right(@right) {
  right: unit((100*@right/750), vw);
}

.font(@font) {
  font-size: unit((100*@font/750), vw);
}

.marginAuto(@top,@bottom){
  margin: unit((100/750)*@top,vw) auto unit((100/750)*@bottom,vw);
}


.marginFourth(@top,@right,@bottom,@left){
  margin: unit((100/750)*@top,vw) unit((100/750)*@right,vw) unit((100/750)*@bottom,vw) unit((100/750)*@left,vw);
}

.paddingFourth(@top,@right,@bottom,@left){
  padding: unit((100/750)*@top,vw) unit((100/750)*@right,vw) unit((100/750)*@bottom,vw) unit((100/750)*@left,vw);
}


.marginBottom(@bottom){
  margin-bottom: unit((100*@bottom/750), vw);
}

.marginRight(@right){
  margin-right: unit((100*@right/750), vw);
}

.marginLeft(@left){
  margin-left: unit((100*@left/750), vw);
}
.marginTop(@top){
  margin-top: unit((100*@top/750), vw);
}

.paddingRight(@right){
  padding-right: unit((100*@right/750), vw);
}

.paddingLeft(@left){
  padding-left: unit((100*@left/750), vw);
}

.paddingBottom(@bottom){
  padding-bottom: unit((100*@bottom/750), vw);
}

.wh(@width:@percent100,@height:@percent100) {
  .width(@width);
  .height(@height);
}

/*圆角*/
.radius(@radius) {
  border-radius: @radius;
}

/*圆*/
.cycle() {
  .radius(@percent100);
}

/*字体*/
.font(@size) {
  font-size: @size;
}

/*盒子模型*/
.boxSizing {
  box-sizing: border-box;
}

.flexCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex {
  display: flex;
}
